<template>
  <div v-if="visible" class="floating-panel">
    <span class="close-btn" role="button" aria-label="关闭" tabindex="0" @click="handleCancel" @keydown.enter="handleCancel">×</span>
    <div class="floating-panel__header">截面</div>
    <div class="floating-panel__body">
      <el-form ref="formRef" :model="form" label-width="90px" size="small" class="section-form">
        <el-form-item label="选择材料" prop="materialKey">
          <el-select v-model="form.materialKey" placeholder="请选择材料" filterable clearable style="width: 240px">
            <el-option v-for="m in availableMaterials" :key="m.key" :label="m.name" :value="m.key" />
          </el-select>
        </el-form-item>
        <el-form-item label="单元类型" prop="elementType">
          <el-radio-group v-model="form.elementType">
            <el-radio label="shell">壳单元</el-radio>
            <el-radio label="beam">梁单元</el-radio>
            <el-radio label="solid">实体单元</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 壳单元字段 -->
        <template v-if="form.elementType==='shell'">
          <el-form-item label="厚度" prop="shell.thickness">
            <el-input-number v-model="form.shell.thickness" :min="0" :step="0.01" />
          </el-form-item>
        </template>
        <!-- 梁单元字段 -->
        <template v-if="form.elementType==='beam'">
          <el-form-item label="面积" prop="beam.area">
            <el-input-number v-model="form.beam.area" :min="0" :step="0.01" />
          </el-form-item>
          <el-form-item label="Ixx" prop="beam.Ixx">
            <el-input-number v-model="form.beam.Ixx" :min="0" :step="0.01" />
          </el-form-item>
          <el-form-item label="Iyy" prop="beam.Iyy">
            <el-input-number v-model="form.beam.Iyy" :min="0" :step="0.01" />
          </el-form-item>
          <el-form-item label="Izz" prop="beam.Izz">
            <el-input-number v-model="form.beam.Izz" :min="0" :step="0.01" />
          </el-form-item>
        </template>
        <!-- 实体单元字段（示例占位，可扩展） -->
        <template v-if="form.elementType==='solid'">
          <el-form-item label="备注" prop="solid.note">
            <el-input v-model="form.solid.note" placeholder="可选备注" clearable />
          </el-form-item>
        </template>
        <div class="form-actions">
          <el-button type="primary" size="small" @click="handleConfirm">确认</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount, computed } from 'vue'
import type { ProjectTreeNode } from '@/store/modules/tree'
import { usePropertyForm } from '../composables/usePropertyForm'
import { useTreeStore } from '@/store/modules/tree'
import { useAvailableSets } from '../composables/useAvailableSets'

const props = defineProps<{ node?: ProjectTreeNode | null; projectId?: number | string | null }>()
const emit = defineEmits<{ (e:'cancel'):void; (e:'confirm'):void; (e:'update', v:any):void }>()

const visible = ref(true)
function handleCancel(){ visible.value=false; emit('cancel') }
function handleKey(e:KeyboardEvent){ if(e.key==='Escape'&&visible.value){ handleCancel() } }
onMounted(()=>{ window.addEventListener('keydown',handleKey); ensureLoaded() })
onBeforeUnmount(()=>window.removeEventListener('keydown',handleKey))

const form = reactive({
  materialKey: '' as string, // 选中的材料节点 key
  elementType: 'shell' as 'shell' | 'beam' | 'solid',
  shell: { thickness: 0 },
  beam: { area: 0, Ixx: 0, Iyy: 0, Izz: 0 },
  solid: { note: '' }
})

const wrapperEmit = (e:'confirm'|'cancel') => { if(e==='confirm'){ emit('update', form); emit('confirm') } }
// usePropertyForm 仍以 namespace 'section' 保存，内部会把 form 深拷贝到 property.section
const { formRef, handleConfirm } = usePropertyForm(form, { node: props.node, projectId: props.projectId, persist: false, namespace: 'section' }, wrapperEmit)

const treeStore = useTreeStore()
// 获取所有材料子节点 materialChildren 作为可选材料
const { availableSets: materialChildren } = useAvailableSets(computed(()=>props.projectId), 'materialChildren')
const availableMaterials = computed(() => materialChildren.value.map(m => ({ key: m.key, name: m.name })) )
function ensureLoaded(){
  if (props.projectId != null && treeStore.getTree(props.projectId).length === 0) treeStore.load(props.projectId)
}
</script>
<style scoped lang="scss">
@use './common.scss' as *;
.section-form { display:flex; flex-direction:column; gap:8px; }
.form-actions { display:flex; justify-content:flex-end; margin-top:4px; width:100%; }
</style>